<template>
  <div class="home">
    <p>homepage</p>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "home",
  data() {
    return {
      form: {
        usr: "10144977",
        pwd: "10144977"
      },
      username: "贾天翔",
      message: "good night！"
    };
  },
  beforeCreate() {
    //对象初始化之前执行
    console.log("--beforeCreate start--");
    console.log(this.usr);
    console.log("--beforeCreate end--");
  },
  created() {
    console.log("--created start--");
    console.log(this.$el); //undefined
    console.log(this.form.usr); // false
    console.log("--created end--");
  },
  methods: {
    // ...mapActions([SET_STORE]),
    getdate() {
      let _this = this;
      setTimeout(() => {
        _this.username = "lala";
      }, 3000);
    }
  },
  beforeMounted() {
    //  这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。
    //  如果没有找到模板，那么它将所定义元素的外部HTML视为模板。
  },
  mounted() {
    // 一旦模板准备就绪。它将数据放入模板并创建可呈现元素。
    // 用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。
    // this.SET_STORE({ isLogin: false}); // 访问本页执行退出
    console.log("mounted start");
    console.log(this.$el);
    console.log(this.form.usr); // false
    console.log("mounted end");
    this.getdate();
  },
  beforeUpdate() {
    // 在外部事件/用户输入beforeUpdate发生更改时，
    // 此钩子即 在反映原始DOM元素的更改之前被触发。
  },
  beforeDestroty() {
    console.log(this.$el);
    console.log(this.rendered);
    // 销毁之前 触发钩子
  },
  destroyed() {
    console.log(this.$el);
    console.log(this.rendered);
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function() {
      // `this` 指向 vm 实例
      return this.message
        .split("")
        .reverse()
        .join("");
    }
  },
  watch: {
    username(val) {
      alert(this.message);
    }
  }
};
</script>
<style>
</style>
